<template>
  <div v-permission="'订单'" class="bg">
    <div class="fixed" ref="fixed">
      <div class="top-chose-box">
        <div class="searchbar-box">
          <nut-searchbar
            class="search-input"
            inputBackground="#fff"
            placeholder="搜索订单手机号"
            @search="handleSearch"
            @clear="handleSearch"
            v-model="listParm.phone"
          >
            <template v-slot:leftin>
              <nut-icon size="14" name="search2"></nut-icon>
            </template>
          </nut-searchbar>
        </div>
      </div>
      <nut-tabs
        title-scroll
        title-gutter="10"
        background="#fff"
        v-model="state.tabvalue"
        @change="changeState"
      >
        <nut-tabpane v-for="item in state.list" :title="item.title">
        </nut-tabpane>
      </nut-tabs>
      <div class="sendgoods flex" v-if="state.tabvalue == 1">
        <div
          v-for="item in sendGoodOptions"
          :class="
            sendsGoodStatus == item.type
              ? 'active sendgoods-item'
              : 'sendgoods-item'
          "
          :key="item.type"
          @click="sendsChoseBtn(item)"
        >
          {{ item.title }}
        </div>
      </div>

      <div class="sendgoods flex" v-if="state.tabvalue == 2">
        <div
          v-for="item in serviceOptions"
          :class="
            serviceStatus == item.type
              ? 'active sendgoods-item'
              : 'sendgoods-item'
          "
          :key="item.type"
          @click="serviceChoseBtn(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="content-wrap-card" :style="{ top: tableHeight + 'px' }">
      <EMPTY v-if="listData.list.length <= 0" />

      <component
        style="height: 100%"
        :is="currentTabComponent"
        :list="listData"
        @loadMore="loadMore"
        :hasMore="hasMore"
        @save="save"
        @confirm="confirm"
        @refound="refound"
      ></component>
    </div>

    <div class="block"></div>
  </div>
</template>

<script lang="ts" setup name="ordermanage">
import {
  reactive,
  toRefs,
  nextTick,
  onMounted,
  ref,
  computed,
  onActivated,
} from "vue";
import useOrderManage from "@/composable/order/useOrder";
import EMPTY from "@/components/Empty/empty.vue";
import TYPE0 from "./components/all/index.vue";
const {
  sendGoodOptions,
  sendsChoseBtn,
  sendsGoodStatus,
  serviceOptions,
  serviceChoseBtn,
  serviceStatus,
  state,
  listParm,
  changeState,
  listData,
  loadMore,
  hasMore,
  handleSearch,
  save,
  confirm,
  refound,
} = useOrderManage();
const tableHeight = ref(0);
const fixed = ref();
const height = ref();
const currentTabComponent = computed(() => {
  nextTick(() => {
    tableHeight.value = fixed.value.offsetHeight;
  });

  if (state.tabvalue == 0 || state.tabvalue == 1 || state.tabvalue == 2) {
    return TYPE0;
  }
});

onMounted(() => {
  nextTick(() => {
    tableHeight.value = fixed.value.offsetHeight;
    height.value = window.innerHeight * 1 - tableHeight.value * 1;
  });
});
</script>
<style scoped lang="scss">
.bg {
  background: #f7f8f9;
  height: 100vh;
  overflow-y: auto;
}

.fixed {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 22;
}

.top-chose-box {
  background: #fff;
  padding: 26px 30px;
  font-size: 32px;

  .top-chose-box-item {
    font-size: 32px;
  }

  .search-input {
    padding: 0 !important;
    border: 4px solid #40ae36;
    border-radius: 50px;
  }

  .nut-icon-search2 {
    color: #40ae36 !important;
    font-weight: bold;
  }

  .searchbar-box {
    padding: 0 10px;
  }
}

:deep(.nut-tabs__titles) {
  padding: 0 !important;
}

:deep(.nut-tabs__titles-item.active .nut-tabs__titles-item__line) {
  background: #40ae36 !important;
  width: 30px;
}

:deep(.nut-tabpane) {
  padding: 0 !important;
}

.content-wrap-card {
  position: absolute;
  margin: 20px 20px 20px 20px;
  border-radius: 20px;
  left: 0;
  right: 0;
  bottom: 110px;
  overflow: hidden;
}

.carditem {
  margin-bottom: 20px;
}

:deep(.nut-menu .nut-menu__bar) {
  box-shadow: none !important;
}

.sendgoods {
  background: #fff;
  padding: 20px 20px;
}

.sendgoods-item {
  color: #444d43;
  font-size: 26px;
  padding: 14px 40px;
  background: #f8f9fa;
  border-radius: 50px;
  margin-right: 20px;
  border: 2px solid transparent;
}

.active {
  border: 2px solid #40ae36;
  color: #40ae36;
  background: #f9fffa;
}

.infiniteUl {
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
